<!doctype html>
<html lang="en">
<head>
    <title>FEATSKY Best-1.0</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="featsky,featsky博客,641151096"/>
    <meta name="description" content="featsky的个人博客,641151096的个人博客"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta data-name="movie" />

    <!-- build:css src/all.css -->
    <link data-type="concat" rel="stylesheet" href="../src/css/common/reset.css">
    <link data-type="concat" rel="stylesheet" href="../src/css/common/common.css">
    <link rel="stylesheet" href="/src/css/movie.css">
    <link rel="stylesheet" href="/src/css/common/icon.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_335441_3afh25ms2t4q85mi.css">
    <!-- endbuild -->

</head>
<body>

<header class="header">
    <div class="header-bar">
        <div class="header-left"></div>
        <div class="header-center">影视</div>
        <div class="header-right">
            <ul class="menu-list fx-col-b">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</header>

<div class="container">
    <ul id="movie-item">
        <!--模版列表-->
    </ul>
    <div class="load-button">加载更多</div>
</div>

<!--#列表详情页面模板#-->
<div class="movie-detail">
    <header class="header">
        <div class="header-bar">
            <div class="header-left"><i class="back iconfont icon-arrows_left"></i></div>
            <div class="header-center">视频详情</div>
            <div class="header-right"></div>
        </div>
    </header>

    <section id="movie">
        <video id="video" src="video/justin.mp4" controls="controls">
            您的浏览器不支持 video 标签。
        </video>

        <div id="movie-main">
            <ul class="fx-row-b">
                <li><h5 data-name="title"></h5></li>
                <li data-name="time"></li>
            </ul>
            <p class="mt10">
                <span>简介:</span>
                <span data-name="description">暂无描述</span>
            </p>
        </div>
    </section>

</div>
<!-->

<!--#列表模板#-->
<ul id="model-1" class="hide">
    <li class="movie-list">
        <div data-name="imgPath" class="movie-content"></div>
        <div class="movie-mask">
            <div class="mask-summary">
                <span data-name="description" class="summary-text"></span>
                <span data-name="time" class="summary-time"></span>
            </div>
        </div>
        <div class="movie-box">
            <h5 data-name="title"></h5>
        </div>
    </li>
</ul>
<!-->
<script src="/src/lib/zepto.js"></script>
<script src="/src/js/common.js"></script>
<script src="/src/js/ajax.js"></script>


<script src="/src/component/load/com-load.js"></script>
<script src="/src/component/message/com-message.js"></script>
<script src="/src/component/movieDetail/movie_detail.js"></script>
<script>

    $(function(){
        var pageResult = 0,pageCount = 2;
        renderData();

        function renderData(){
            app.ajax('get',app.url('getMovieList.php'),{page:pageCount,pageStart:pageResult},function(data){
                var obj = data,str = '';
                var model = $('#model-1').clone();
                for(var i=0;i<obj.length;i++){
                    if(obj[i].statusCode == 404){continue;}
                    //列表id
                    model.find('.movie-list').attr('data-id',obj[i].id);
                    //列表背景
                    model.find("[data-name='imgPath']").css('background-image',"url("+app.imgUrl('movie/'+obj[i].imgPath)+")");
                    //标题
                    model.find("[data-name='title']").text(obj[i].title);
                    //时间
                    model.find("[data-name='time']").text(obj[i].time);
                    //介绍
                    model.find("[data-name='description']").text(obj[i].description);
                    str +=  model.html();
                }

                if(str == ''){
                    $.comMessage({
                        type:'warning',
                        text:'已没有更多内容!',
                        time:3000,
                        animateTop:'80px'
                    })
                }else{
                    $('#movie-item').append(str);
                }
                return pageResult = pageResult + pageCount;
            });
        }

        //详情页返回事件
        com.moveDetail($('.movie-detail'),function(){
            $('#video')[0].pause();
            $('body').removeClass('body-overflow');
        });

        //加载更多
        $('.load-button').on('tap',function(){
            renderData();
        });

        //列表事件
        $('#movie-item').on('tap','li',function(){
            //初始化视频隐藏
            var id = $(this).attr('data-id');
            com.renderMovie(id,function(){
                setTimeout(function(){
                    $('body').addClass('body-overflow');
                    $('.movie-detail').css('-webkit-transform','translateX(-100%)').on('touchmove',function(e){
                        e.preventDefault();
                    },300)
                })
            });
        })
    })
</script>
</body>
</html>